<template>
    <view class="tabbar">
        <view
            :class="'tabbar-item ' + (activeIdx === index ? 'active' : '')"
            @tap="switchTab"
            :data-path="item.pagePath"
            :data-index="index"
            v-for="(item, index) in tabbarList"
            :key="item.pagePath"
        >
            <view class="tabbar-item-icon">
                <image class="tabbar-item-icon-img" :src="activeIdx === index ? item.selectedIconPath : item.iconPath"></image>
            </view>

            <view class="tabbar-item-text">{{ item.text }}</view>
        </view>
    </view>

    <!-- <cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{tabbarList}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>  
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>  -->
</template>

<script>
// component/tabbar/index.js
export default {
    data() {
        return {
            // selected:0,
            color: '#999',
            selectedColor: '#FF8722',
            tabbarList: [
                {
                    pagePath: '/pageshop/index/index',
                    text: '工作台',
                    iconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/1de26c041614e5b66350a06145e4512a.svg',
                    selectedIconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/8e9319f74954fb3537fd7602b3099d3a.svg',
                    auth: 1
                },
                {
                    // "pagePath": "/pageshop/index/index",
                    text: '营销',
                    iconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/a36edc40a81bbf159604726f7ceb3d22.svg',
                    selectedIconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/a4466a062205ad3e72afece5740776c2.svg',
                    auth: 1
                },
                {
                    // "pagePath": "/pageshop/index/index",
                    text: '业绩',
                    iconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/ace1528f98cfa76eadef2d13961e9df3.svg',
                    selectedIconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/75756dfe3a71c12375521f0b2577e190.svg',
                    auth: 1
                },
                {
                    pagePath: '/firstpages/my2/index',
                    text: '我的',
                    iconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/d04a25d865b35b01ec9f060178874360.svg',
                    selectedIconPath: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/c034a024a835a32c232db7989c6cf6ab.svg',
                    auth: 1
                }
            ]
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        activeIdx: {
            type: Number
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset;
            console.log(e);
            const url = data.path;

            if (!url) {
                uni.showModal({
                    title: '提示',
                    content: '该功能有待开发，敬请期待'
                });
                return;
            }

            uni.redirectTo({
                url
            });
        }
    }
};
</script>
<style>
/* component/tabbarshop/index.wxss */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    border-top: 20rpx solid #f1f1f1;
    display: flex;
    font-size: 0;
    background-color: #fff;
    padding-bottom: 30rpx;
}

.tabbar-item {
    flex: 1;
    text-align: center;
    overflow: hidden;
    padding: 12rpx;
    color: #616365;
    box-sizing: border-box;
}

.tabbar-item-icon {
    margin-bottom: 6rpx;
}

.tabbar-item-icon .tabbar-item-icon-img {
    width: 50rpx;
    height: 50rpx;
}
.cover-view-tabbar-item-icon-img {
    left: 50%;
    transform: translateX(-50%);
}
.tabbar-item-text {
    font-size: 24rpx;
    font-weight: 500;
    color: #999;
    letter-spacing: 2rpx;
}

.active .tabbar-item-text {
    color: #222;
}

/* .tab-bar {
  border-top: 20rpx solid #F1F1F1;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 58px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

/* .tab-bar-border {
  background-color:#F1F1F1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40rpx;
  transform: scaleY(0.5);
} */

/* .tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}  */
</style>
